
<!doctype html>
<html  class="x-admin-sm">
<head>
	<meta charset="UTF-8">
	<title>管理登录</title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/login.css">
	  <link rel="stylesheet" href="./css/index.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script src="js/crypto-js.js"></script>
<style>
        * {
            margin: 0;
            padding: 0;
        }
 
 
        .sliderModel {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            display: none;
         
        }
        .sliderModel .cont{padding: 20px; width: 280px; background: #fff;border-radius: 6px;margin: 50px auto;}
        .showMessage {
            text-align: center;
            font-size: 14px;
            height: 30px;
            line-height: 30px;
            /*避免活动的过程中选择文字*/
            -moz-user-select:none;
            -webkit-user-select:none;
            user-select:none;   
        }
       
        #canvas_wrap{
            width: 280px;
        }
        #canvas_wrap canvas{
            display: block; 
        }
 
    </style>
</head>
<body class="login-bg">
    
    <div class="login layui-anim layui-anim-up">
        <div class="message">管理登录</div>
        <div id="darkbannerwrap"></div>
        
        <form method="post" class=""  action="../login">
        
        	<span>账号 </span><span id ="accountNumberVerification" style ="color:red"> </span>
            <input name="accountNumber" placeholder="手机号/QQ号"  type="text" lay-verify="required" class="layui-input" >
            <hr class="hr15">
            
            <span>密码 </span><span id ="passwordVerification" style ="color:red"> </span>
            <input name="password" lay-verify="required" placeholder="密码"  type="password" class="layui-input" >
            <hr class="hr15">
         
            <input type="checkbox" name="rememberme" value="rememberme" lay-verify="required" ><label> 记住密码</label> 
            <hr class="hr15">
            <input value="登录" id="login" lay-submit lay-filter="login" style="width:100%;" type="button">
            <hr class="hr20" >
            <div>
            	<span>没有账号？ </span><a href="./register.html">注册</a>
            </div>
        </form>
    </div>
    <div class="sliderModel">
      <div class="cont">
      <span id="close">关闭</span>
         <div id="canvas_wrap"></div>
         <div class="showMessage"></div>
      </div>
      
   </div>
  <!-- 滑块验证 -->
  <script src="./js/newSlider.js"></script>
<script>
	var flag = true;
	function login(){
		$.ajax({
			type:"get",
			url:"../login",
			data:{
				op:"login", // 请求
				
				accountNumber:$("input[name='accountNumber']").val(),
				rememberme:$("input[name='rememberme']").val(),
				password:encrypt($("input[name='password']").val())
			},
			dataType:"json",
			success:function(result){ 
				if(result == "登录失败"){
					 layui.use('layer', function(){
						layer.msg('用户名或密码错误!',{icon:2,time:2000});
					 });
				}else{
					window.location = "./index.html";
				}
			}
		})
	}
    function showMessage(msg,color){
        var showMessage = document.querySelector('.showMessage');
        showMessage.innerHTML=msg;
        showMessage.style.color=color;
    }
    var obj={
        el:'#canvas_wrap',
        w:280,
        h:150,
        imgArr:['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg'],
        sliderIcon:'images/1.png',
        refresh:function(){
            showMessage('','#333')
        },
        finish:function(e){
            if(e){
            	if(flag){
            		flag=false;
            		//验证成功2秒后跳转到主页面
                	showMessage('验证成功!','green')
                	setTimeout(login(),2000);
            	}
            }else{
            	showMessage('验证失败,请重试','red');
            }
        }
    }
   
</script>
	<script>
	//关闭滑动解锁窗口
	 document.querySelector('#close').onclick=function(){ //关闭
         document.querySelector('.sliderModel').style.display="none";
     }
	//解密方法
    function Decrypt(str) {
        let key = CryptoJS.enc.Utf8.parse("0102030405060708");
        let decrypt = CryptoJS.AES.decrypt(str, key, {iv: key,mode:CryptoJS.mode.CBC});
        return CryptoJS.enc.Utf8.stringify(decrypt).toString();
    }
	//加密方法
	function encrypt(str) {
	      //密钥--应和后台java解密或是前台js解密的密钥保持一致（16进制）
	      var key = CryptoJS.enc.Utf8.parse("0102030405060708");//秘钥
		  var content= CryptoJS.enc.Utf8.parse(str);//需要加密的内容
		  var encrypted = CryptoJS.AES.encrypt(content, key, {iv: key,mode:CryptoJS.mode.CBC}); //加密内
	      return encrypted.toString();
  } 
	$(function  () {
		var i = 0;
		var x = 0;
		//账号框验证
		$("input[name='accountNumber']").blur(function() {
			let accountNumber = $(this).val();
			if (accountNumber==""){
				$("#accountNumberVerification").text("请输入手机号或者QQ号");
				i=0;
			}else if(accountNumber.length < 10 || accountNumber.length > 11){
				$("#accountNumberVerification").text("请输入正确手机号或者QQ号");
				i=0;
			}else{
				$("#accountNumberVerification").text(" ");
				i=1;
			}
		});
		
		//密码框验证
		$("input[name='password']").blur(function() {
			let password = $(this).val();
			if (password==""){
				x=0;
				$("#passwordVerification").text("请输入密码");
			}else if(password.length<6 || password.length>12){
				x=0;
				$("#passwordVerification").text("密码在6-12位");
			}else{
				x=1;
				$("#passwordVerification").text(" ");
			}
		});
		
		$("#login").click(function(){
				
				if(i+x == 2){
					flag = true;
					//打开图片滑动解锁窗口
					document.querySelector('.sliderModel').style.display="block";
					new window.$newSlider(obj);
				}
		});
		
		// 当用户访问登录页面的时候，页面中需要通过javascript获取cookie信息,如果有对应的cookie信息自动填充，并设置复选框为选中状态
		
		// 获取"rememberMe"cookie信息
		var rememberMeValue = getCookie("rememberMe"); // 15065958096=123456
		if(rememberMeValue!=""){
			var vs = rememberMeValue.split("=");
			i=1;
			x=1;
			$("input[name='accountNumber']").val(vs[0]);
			$("input[name='password']").val(Decrypt(vs[1]));
			$("input[name='rememberme']").prop("checked",true);
		}else{
			$("input[name='rememberme']").prop("checked",false);
		}
	
		
		// 当用户访问登录页面的时候，输入用户名失去焦点如果有对应的cookie则显示在指定密码位置上,并设置复选框为选中状态
		$("input[name='accountNumber']").blur(function(){
			// 用户输入的账号
			var mobile = $(this).val();
			// 获取rememberMe cookie的值,15065958096=123456
			var rememberMeValue = getCookie("rememberMe");
			var vs = rememberMeValue.split("=");
			// 对比值的第一个元素是否和用户输入的账号一致
			if(vs[0]==mobile){
				i=1;
				x=1;
				$("input[name='password']").val(Decrypt(vs[1]));
				$("input[name='rememberme']").prop("checked",true);
			}else{
				$("input[name='password']").val("");
				$("input[name='rememberme']").prop("checked",false);
			}
		})
	  })
	  
	  // 使用通用函数获取指定cookie名的值
	  function getCookie(cname){
		  var name = cname + "=";  // 
		  var ca = document.cookie.split(';'); // 字符串根据;切割成数组
		  for(var i=0; i<ca.length; i++){      // 遍历数组
		    var c = ca[i].trim();
		    if (c.indexOf(name)==0) {
		    	return c.substring(name.length,c.length); 
		    }
		  }
		  return "";
	   }
	</script>
	

</body>
</html>